import Base from '../base.js'
import moviesApi from "../../api/movies.js"
export default class extends Base {
    data = {
        curPage: 1,//当前页
        eachPage: 5,//每页显示条数
        total: 0,//总条数
        maxPage: 0,//总页数
        //用于描述学生的数据列表
        rows: []
    };
    msg={}
    render() {
        this.$el.html(`
          <form class="layui-form"  lay-filter="formTest" style="display:flex">
                <label class="layui-form-label">电影名</label>
                <input type="text"  name="cname" lay-verify="title" autocomplete="off" placeholder="请输入电影名" class="layui-input" style="width:150px">      
                <label class="layui-form-label">电影的类型</label>
                <input type="text" name="type"  lay-verify="title" autocomplete="off" placeholder="请输入电影的类型" class="layui-input" style="width:150px">
                <label class="layui-form-label">导演名字</label>
                <input type="text" name="director" lay-verify="title" autocomplete="off" placeholder="请输入导演名字" class="layui-input" style="width:150px">
                <label class="layui-form-label">演员名字</label>
                <input type="text" name="actor" lay-verify="title" autocomplete="off" placeholder="请输入演员名字" class="layui-input" style="width:150px">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
          </form>
          </div>
              <table id="demo" lay-filter="test"></table>
          <div id="test1"></div>
              
            `)
        this.table = layui.table;
        this.table.render({
            elem: '#demo'
            // , page: true //开启分页
            //表格的列
            , cols: [[ //表头
                , { field: 'cname', title: '电影名', fixed: 'left' }
                , { field: 'ename', title: '电影英文名' }
                , { field: 'type', title: '电影的类型' }
                , { field: 'area', title: '电影首映地区' }
                , { field: 'time', title: '电影时长' }
                , { field: 'upDate', title: '电影大陆上映时间' }
                , { field: 'score', title: '电影评分' }
                , { field: 'count', title: '电影票房' }
                , { field: 'intro', title: '剧情简介' }
                , {
                    field: '', title: '是否是经典', templet: res => {
                        return `
                            ${res.isClassic ? "是" : "否"}
                            `
                    }
                }
                , { field: 'director', title: '导演名字' }
                , { field: 'actor', title: '演员名字', }
                , {
                    field: '_id',
                    title: '操作',
                    fixed: 'right',
                    templet: res => {
                        const { _id } = res;
                        return `
                        <a href="#/info/imgs/${_id}" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="chek" href="#/info/imgs/${_id}">查看图片</a>
                        <a _id="${_id}" class="layui-btn layui-btn-xs edit" lay-event="edit" href="#/info/updateMovies/${_id}">修改</a>
                        <a _id="${_id}" class="layui-btn layui-btn-danger layui-btn-xs del" lay-event="del">删除</a>
                `
                    }
                }
            ]]

        });
        this.saveBtn = $(".layui-btn");
        this.form = layui.form;

    };

    rerender() {
        this.table.reload('demo', {
            data: this.data.rows,
        });

        var that = this;
        //分页
        this.laypage = layui.laypage;
        //执行一个laypage实例
        this.laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: this.data.total //数据总数，从服务端得到
            , limit: this.data.eachPage
            , limits: [5, 10, 20]
            , curr: this.data.curPage
            , layout: ['prev', 'page', 'next', "groups", "count", "limit"]
            , jump: async (obj, first) => {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    this.data.curPage = obj.curr;
                    this.data.eachPage = obj.limit;

                    const { curPage, eachPage } = this.data;
                    this.data = await moviesApi.getMov({ curPage, eachPage });

                    this.table.reload('demo', {
                        data: this.data.rows,
                        limit: this.data.eachPage
                    });
                }
            }
        });
        //删除
        $(document).on("click", ".del", async function () {
            layer.open({
                content: '是否删除该电影'
                , btn: ['确定', '取消']
                , yes: async (index, layero) => {
                    //按钮【按钮一】的回调
                    const { _id } = { _id: $(this).attr("_id") };
                    await moviesApi.delMovies({ _id });
                    that.getMovies()
                    layer.close(index)
                }
                , cancel: function () {
                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });

        })


    }

    async getMovies() {
        const { curPage, eachPage } = this.data;
        this.data = await moviesApi.getMov({ curPage, eachPage });
        // console.log(this.data);
        this.rerender();
    }
    async searchDate() {
        //获取表单区域所有值
        let data = this.form.val("formTest");
        data.curpage = this.data.curPage
        data.eachpage = this.data.eachPage
        
        this.msg = await moviesApi.searchMovies(data)
        
        // this.rerender();

        this.table.reload('demo', {
            data: this.msg.rows,
        });




        this.laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: this.msg.total //数据总数，从服务端得到
            , limits: [5, 10, 20]
            , limit: this.msg.eachpage
            , curr: this.msg.curpage
            , layout: ['prev', 'page', 'next', "groups", "count", "limit"]
            , jump: async (obj, first) => {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    data.curpage = obj.curr;
                    data.eachpage = obj.limit;
                    console.log(data.curpage,data.eachpage);
                    this.msg = await moviesApi.searchMovies(data)

                    this.table.reload('demo', {
                        data: this.msg.rows,
                        limit: this.msg.eachpage,
                        
                    });
                }
            }
        });


    }
    handle() {
        this.saveBtn.on("click", () => this.searchDate())
    }
    async mounted() {
        this.getMovies();
    }

}